<%--
  Created by IntelliJ IDEA.
  User: zzz
  Date: 2020/1/15
  Time: 19:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家居家具管理系统</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::dropzone -->
    <link rel="stylesheet" href="${APP_PATH}/assets/vendors/dropzone/dropzone.css" type="text/css">
    <!-- begin::dropzone -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="${APP_PATH}/assets/css/app.css" type="text/css">
    <link rel="stylesheet" href="${APP_PATH}/assets/css/custom.css" type="text/css">
    <!-- end::custom styles -->

</head>
<body>

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border text-primary"></div>
    <span>加载中 ...</span>
</div>
<!-- end::page loader -->

<!-- begin::navigation -->
<jsp:include page="/WEB-INF/jsps/Manager/common/navigation.jsp"/>
<!-- end::navigation -->

<!-- begin::top -->
<jsp:include page="/WEB-INF/jsps/Manager/common/top.jsp"/>
<!-- end::top -->

<!-- begin::main content -->
<main class="main-content">

    <div class="container-fluid">

        <!-- begin::page header -->
        <div class="page-header d-md-flex justify-content-between align-items-center">
            <h4>我的商品</h4>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb m-t-0">
                    <li class="breadcrumb-item"><a href="${APP_PATH}/toManager">首页</a></li>
                    <li class="breadcrumb-item active" aria-current="page">我的商品</li>
                </ol>
            </nav>
        </div>
        <!-- end::page header -->
        <div class="card-group">

            <div class="card">
                <img src="${APP_PATH}/img/flo5.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Ta的浪漫</h5>
                    <p class="card-text">Sans toi,les eacute;motions d'aujourd'hui ne seraient que la peau morte des eacute;motions d'autrefois……</p>
                    <p class="card-text">
                        <small class="text-muted">--by Fang</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img src="${APP_PATH}/img/idea3.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">家的温馨</h5>
                    <p class="card-text">家是温暖的港湾，它带给人们的感受是温暖；家是永远的岸，它带给人们的感受是梦魂萦绕和永远的牵挂……</p>
                    <p class="card-text">
                        <small class="text-muted">--by Fang</small>
                    </p>
                </div>
            </div>
            <div class="card">
                <img src="${APP_PATH}/img/id13.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">梦的灵感</h5>
                    <p class="card-text">Inspiration, the goddess of genius. She doesn't hobbled walk, but in the air like a crow so alert passing……</p>
                    <p class="card-text">
                        <small class="text-muted">--by Fang</small>
                    </p>
                </div>
            </div>

        </div>


        <div id="myCards" class="card-columns">

    </div>

        <!-- begin::bottom -->
        <div class="card-group">
            <jsp:include page="/WEB-INF/jsps/Manager/common/bottom.jsp"/>
        </div>
        <!-- end::bottom -->

    </div>



    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog"
         aria-labelledby="updateModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="updateModalTitle">更新版块</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="update" class="needs-validation" novalidate>
                        <input type="hidden" id="kid" >
                        <div class="form-group">
                            <label for="knameForUpdate" class="col-form-label">版块名称:</label>
                            <input type="text" class="form-control" id="knameForUpdate" name="kname" required>
                            <div class="invalid-feedback">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="styleForUpdate" class="col-form-label">排版样式:</label>
                            <br>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="styleForUpdate" name="style" value="1" checked class="custom-control-input">
                                <label class="custom-control-label" for="styleForUpdate">种类分页样式</label>
                            </div>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="styleForUpdate2" name="style" value="2" class="custom-control-input">
                                <label class="custom-control-label" for="styleForUpdate2">种类集中样式</label>
                            </div>
                        </div>
                    </form>
                    <label class="col-form-label">版块封面:</label>
                    <div class="form-group">
                        <figure>
                        <img id="kface" src="" class="card-img-top" >
                        </figure>
                    <form  action="${APP_PATH}/kinds/kfaceUpdate" class="dropzone">
                    </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="cancelForUpdate" type="button" class="btn btn-secondary" data-dismiss="modal">算了...
                    </button>
                    <input id="subForUpdate" type="submit" class="btn btn-primary" onclick="return myUpdate()" value="决定了！"/>
                </div>
            </div>
        </div>
    </div>



    <div class="modal fade" id="insertModal" tabindex="-1" role="dialog"
         aria-labelledby="insertModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="insertModalTitle">添加版块</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="insert" class="needs-validation" novalidate>
                        <div class="form-group">
                            <label for="knameForInsert" class="col-form-label">版块名称:</label>
                            <input type="text" class="form-control" id="knameForInsert" name="kname" required>
                            <div class="invalid-feedback">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="styleForInsert" class="col-form-label">排版样式:</label>
                            <br>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="styleForInsert" name="style" value="1" checked class="custom-control-input">
                                <label class="custom-control-label" for="styleForInsert">种类分页样式</label>
                            </div>
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="styleForInsert2" name="style" value="2" class="custom-control-input">
                                <label class="custom-control-label" for="styleForInsert2">种类集中样式</label>
                            </div>
                        </div>
                    </form>
                    <label class="col-form-label">版块封面:</label>
                    <form action="${APP_PATH}/kinds/kfaceUpload" class="dropzone">
                    </form>
                </div>

                <div class="modal-footer">
                    <button id="cancelForInsert" type="button" class="btn btn-secondary" data-dismiss="modal">算了...
                    </button>
                    <input id="subForInsert" type="submit" class="btn btn-primary"  onclick="return myInsert()" value="决定了！"/>
                </div>

            </div>
        </div>
    </div>

</main>
<!-- end::main content -->


<!-- begin::global scripts -->
<script src="${APP_PATH}/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::dropzone -->
<script src="${APP_PATH}/assets/vendors/dropzone/dropzone.js"></script>
<!-- end::dropzone -->

<!-- begin::custom scripts -->
<script src="${APP_PATH}/assets/js/custom.js"></script>
<script src="${APP_PATH}/assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>
</html>

<script type="text/javascript" src="${APP_PATH}/js/jquery-3.3.1.min.js"></script>

<script>
    //表单验证
    var isExistForInsert = false;
    var isNullForInsert = false;
    var isExistForUpdate = false;
    var isNullForUpdate = false;
    $(function () {
        $(document).bind("contextmenu",function(e){
            return false;
        });

        $("input[name='kname']").each(function () {
            var id = "#"+$(this).attr("id");
            $(this).on("keyup blur",function () {
                validationNull(id);
                validationExist(id);
            });
          });

    });


    function validationNull(id) {
        var isNull = false;
        var newKname = $(id).val();
        if(newKname ==''){
            $(".invalid-feedback").html("不取名字可不行哦~");
            $(id).removeClass("is-valid");
            $(id).addClass("is-invalid");
            isNull = true;
        }else{
            $(id).removeClass("is-invalid");
            $(id).addClass("is-valid");
            isNull = false;
        }
        if(id == "#knameForInsert"){
              isNullForInsert = isNull;
        }else{
             isNullForUpdate = isNull;
        }
    }

    function validationExist(id) {
        var isExist = false;
        var newKname = $(id).val();
        var kid = null;
        if(id == "#knameForUpdate"){
            var kid = $("#kid").val();
        }
        $.ajax({
            url: "${APP_PATH}/kinds/validationExist",
            method: 'POST',
            data:{
                    kid : kid,
          newKname : newKname},
            success: function (result) {
                if (result.success) {
                    $(".invalid-feedback").html("该版块已经存在了哦~");
                    $(id).removeClass("is-valid");
                    $(id).addClass("is-invalid");
                    isExist = true;
                }else {
                    isExist = false;
                }
                if(id == "#knameForInsert"){
                    isExistForInsert = isExist;
                }else{
                    isExistForUpdate = isExist;
                }
            }
        });
    }
</script>

<script>
    $(function () {
        //Kinds列表初始化
        createCards();
        fileMap.set(1,null);
        fileMap.set(2,null);
    });
    var fileNum = 0;
    var fileMap = new Map();
    var multiple = false;
    var myDropzone = null;


    //表单初始化
    function removeAll() {
        fileNum = 1;
        if(myDropzone!=null){
            myDropzone.removeAllFiles();
        }
        $("#update,#insert").each(function () {
            this.reset();
            $(this).removeClass();
        });
        $("input[name='kname']").each(function () {
            $(this).removeClass("is-valid is-invalid");
        });
    }

    //获取kinds信息
    function getKindsInfo(kid,kname,kface,style) {
           removeAll();
          $("#knameForUpdate").val(kname);
          $("#kface").attr("src",kface);
          $("#kid").val(kid);
          $("#update").find("input[name = 'style'][value = "+style+"]").prop("checked",true);
          fileNum = 2;
    }

    //修改Kinds
    function myUpdate() {
        var kid = $("#kid").val();
        var kname = $("#knameForUpdate").val();
        var style = $("#update").find("input[type='radio']:checked").val();
        var kface = $(".dz-image").html();
        var flag = true;

        if(kface==undefined){
            flag = false;
        }

        var data = {
            _method: 'PUT',
            kid: kid,
            kname: kname,
            style: style,
            flag: flag
        };

        validationNull("#knameForUpdate");
        validationExist("#knameForUpdate");

        if(!isNullForUpdate && !isExistForUpdate){
        $.ajax({
            url: "${APP_PATH}/kinds/updateKinds/"+kid,
            method: 'POST',
            data:data,
            success: function (result) {
                if (result.success) {
                    swal("更新成功！", {
                            icon: "success"
                        }
                    );
                    createCards();
                }else{
                    swal("更新失败！", {
                            icon: "error"
                        }
                    );
                }
            },
            complete: function () {
                 removeAll();
                 $("#cancelForUpdate").click();
            }
        });
    }
       return false;
    }

    //删除Kinds
    function myDelete(id) {
        var data = {
        _method: 'DELETE',
              kid: id
    };

        swal({
            title: "确定要删除吗?",
            icon: "warning",
            buttons: ["算了", "就要"],
            dangerMode: true
        }).then((willDelete) => {
            if (willDelete) {

                $.ajax({
                    url: "${APP_PATH}/kinds/deleteKinds/"+id,
                    method: 'POST',
                    data:data,
                    success: function (result) {
                        if (result.success) {
                            swal("删除成功！", {
                                    icon: "success"
                                }
                            );
                            createCards();
                        }else{
                            swal("该板块中还存在商品信息，无法删除！", {
                                    icon: "error"
                                }
                            );
                        }
                    }
                });

            } else {
                swal("您取消了删除.", {
            icon: "info"
        });
    }
    });

    }

    //添加Kinds
    function myInsert() {
        var kface = $(".dz-image").html();
        var kname = $("#knameForInsert").val();
        var style = $("#insert").find("input[type='radio']:checked").val();
        var flag = true;
        if(kface==undefined){
           flag = false;
        }
        var data = {
            kname: kname,
            style: style,
            flag: flag
        };

        validationNull("#knameForInsert");
        validationExist("#knameForInsert");

        if(!isNullForInsert && !isExistForInsert){
            $.ajax({
                url: "${APP_PATH}/kinds/insertKinds",
                method: 'post',
                data:data,
                success: function (result) {
                    if (result.success) {

                        swal("添加成功！", {
                                icon: "success"
                            }
                        );
                        createCards();
                    }
                },
                complete: function () {
                    $("#cancelForInsert").click();
                    removeAll();
        }
            });
        }
         return false;
    }

    //得到最新商品
    function getNewFurniture(kid,ktid) {
        $.ajax({
            url : "${APP_PATH}/furniture/findNewFurniture",
            method : "POST",
            data : {
                ktid : ktid,
                count : 2
            },
            success: function (result3) {
                if (result3.success) {
                    var furnitureList = result3.data.datas;
                    var furnitureContent = "";
                    if(furnitureList.length == 2){
                        for (var k = 0; k < furnitureList.length; k++) {
                            furnitureContent +='<div class="col-md-6">';
                            furnitureContent +='<a href="${APP_PATH}/toFurniture_Detail?kid='+kid+'&ktid='+ktid+'&fid='+furnitureList[k].fid+'"><img src="${APP_PATH}/'+furnitureList[k].fface+'" alt="image" class="img-thumbnail"></a></div>';
                        }
                    }else if(furnitureList.length == 1){
                        furnitureContent +='<div class="col-md-6">';
                        furnitureContent +='<a href="${APP_PATH}/toFurniture_Detail?kid='+kid+'&ktid='+ktid+'&fid='+furnitureList[0].fid+'"><img src="${APP_PATH}/'+furnitureList[0].fface+'" alt="image" class="img-thumbnail"></a></div>';
                        furnitureContent +='<div class="col-md-6">';
                        furnitureContent +='<img src="${APP_PATH}/img/nodata2.png" alt="image" class="img-thumbnail"></div>';
                    }else {
                        furnitureContent +='<div style="margin: 0 auto;" class="col-md-6">';
                        furnitureContent +='<img src="${APP_PATH}/img/nodata3.png" alt="image" class="img-fluid"></div>';
                    }
                    $("#newFurniture"+ktid).html(furnitureContent);
                }else{
                    swal("无法获取种类信息", {icon: "error"});
                }
            }
        });

    }

    //得到KindsType信息
    function getKindsType(kid) {
        $.ajax({
            url: "${APP_PATH}/kindsType/findAllByKid",
            method: 'post',
            data: {kid : kid},
            success: function (result2) {
                if (result2.success) {
                    var kindsTypeList = result2.data.datas;
                    var kindsTypeContent = "";
                    if(kindsTypeList.length > 0){
                        for (var j = 0; j < kindsTypeList.length; j++) {
                            kindsTypeContent +='<div class="accordion-row ';
                            if( j == 0){
                                kindsTypeContent +='open';
                            }
                            kindsTypeContent +='">';
                            kindsTypeContent +='<a href="#" class="accordion-header">';
                            kindsTypeContent +='<span>'+kindsTypeList[j].ktname+'</span>';
                            kindsTypeContent +='<i class="accordion-status-icon close fa fa-plus"></i>';
                            kindsTypeContent +='<i class="accordion-status-icon open fa fa-minus"></i></a>';
                            kindsTypeContent +='<div class="accordion-body">';
                            kindsTypeContent +='<p></p>';
                            kindsTypeContent +='<div class="row m-b-15">';
                            kindsTypeContent +='<figure><a href="${APP_PATH}/toFurniture?kid='+kid+'&ktid='+kindsTypeList[j].ktid+'"><img src="${APP_PATH}/'+kindsTypeList[j].ktface+'" class="card-img-top" alt="..."></a></figure></div>';
                            kindsTypeContent +='<div id="newFurniture'+kindsTypeList[j].ktid+'" class="row m-b-15">';
                            kindsTypeContent +='</div></div></div>';
                            getNewFurniture(kid,kindsTypeList[j].ktid);
                        }
                    }
                    $("#accordion"+kid).html(kindsTypeContent);
                }else {
                    swal("无法获取种类信息", {
                        icon: "error"
                    });
                }
            }
        });
    }

    //创建Kinds列表
    function createCards() {
        $.ajax({
            url: "${APP_PATH}/kinds/findAll",
            method: 'post',
            beforeSend: function () {
                var kindsContent = "";
                kindsContent += '<div style="margin-left: 575px;" class="spinner-grow text-primary" role="status">';
                kindsContent += '<span class="sr-only"></span>';
                kindsContent += '</div>';
                $("#myCards").html(kindsContent);
            },
            success: function (result) {
                if (result.success) {
                    var kindsContent = "";
                    var kindsList = result.data.datas;

                    for (var i = 0; i < kindsList.length; i++) {
                           kindsContent +='<div class="card">';
                           kindsContent +='<div class="card-header"><span>'+kindsList[i].kname+'</span><button onclick="myDelete('+kindsList[i].kid+')" type="button"  class="btn btn-outline-danger btn-floating"  style="float: right;margin-top: -5px;"><i class="ti-trash"></i></button>';
                           kindsContent +='<button data-target="#updateModal" data-toggle="modal" onclick="getKindsInfo('+kindsList[i].kid+',\''+kindsList[i].kname+'\',\''+kindsList[i].kface+'\','+kindsList[i].style+')" type="button"  class="btn btn-outline-info btn-floating"  style="float: right;margin-top: -5px; margin-right: 5px;"><i class="ti-settings"></i></button></div>';
                           kindsContent +='<div class="card-body">';
                           kindsContent +='     <figure>';
                           kindsContent +='     <img src="${APP_PATH}/'+kindsList[i].kface+'" class="card-img-top" alt="...">';
                           kindsContent +='     </figure>';
                           kindsContent +='<div id="accordion'+kindsList[i].kid+'" class="accordion  custom-accordion">';
                           kindsContent +='</div></div>';
                           kindsContent +='<div class="card-footer"><a href="${APP_PATH}/toKindsType?kid='+kindsList[i].kid+'" class="btn btn-primary">查看更多</a></div></div>';
                           getKindsType(kindsList[i].kid);
                    }

                           kindsContent +='<div class="card">';
                           kindsContent +='        <div class="card-body">';
                           kindsContent +='        <h5 class="card-title">要加点什么吗？</h5>';
                           kindsContent +='   <p class="card-text">看起来不错，不过 ... em ... </p>';
                           kindsContent +='   <button onclick="removeAll()" type="button" class="btn btn-primary" data-toggle="modal"';
                           kindsContent +='   data-target="#insertModal">';
                           kindsContent +='       感觉少了点什么';
                           kindsContent +='       </button></div></div>';

                    $("#myCards").html(kindsContent);
                }else {
                    swal("无法获取版块信息", {
                        icon: "error"
                    });
                }
            }
        });
    }
</script>

